Estoy tratando de aplicar estilos condicionales en React. Necesito aplicar una animación cuando hago clic en el botón Eliminar, pero esto se aplica a todos los elementos de la matriz.
Component
import React, { useState } from 'react'; import './styles.css'; const Element = () => { const [onDelete, setOnDelete] = useState(false); const list = [ { name: 'Jhon', age: '20', }, { name: 'Maria', age: '25', }, ]; return ( <> {list.map((item) => ( <ul className={onDelete ? 'onDelete-apply' : ''}> <li>{item.name}</li> <li>{item.age}</li> <button onClick={() => setOnDelete(true)}> Delete </button> </ul> ))} </> ); }; export default Element; Styles
.onDelete-apply { background-color: red; }* Por ejemplo, en este componente, quiero aplicar un fondo rojo solo al elemento en el que se hizo clic *
Debe rastrear el elemento en el que se hace clic por su índice, en lugar de verdadero o falso, al hacer clic, establece el índice del elemento en el que se hizo clic en el estado y luego verifica si ese índice es el mismo que el índice del elemento cuando se representa
import React, { useState } from 'react'; import './styles.css'; const Element = () => { const [deletedIndex, setDeletedIndex] = useState(false); const list = [ { name: 'Jhon', age: '20', }, { name: 'Maria', age: '25', }, ]; return ( <> {list.map((item, i) => ( <ul key={i} className={deletedIndex === i ? 'onDelete-apply' : ''}> <li>{item.name}</li> <li>{item.age}</li> <button onClick={() => setDeletedIndex(i)}>Delete</button> </ul> ))} </> ); export default Element;